<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const router = useRouter();
const items = ref([]); // 存储案例数据

// 获取对比案例数据
const fetchitems = async () => {
  try {
    const response = await axios.get('http://localhost:8080/api/comparison-cases/category/comparison');
    items.value = response.data;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

onMounted(() => {
  fetchitems();
});

const onClickLeft = () => {
  router.push('/declare')
}
</script>

<template>
  <div>
    <van-nav-bar title="对比" left-text="返回" left-arrow @click-left="onClickLeft"
      style="position: fixed; width: 100%; z-index: 999;" />
    <div style="height: 46px;"></div>

    <!-- 案例列表 -->
    <div class="item-list" v-for="item in items" :key="item.id">
      <van-cell-group>
        <van-cell :title="item.username">
          <template #icon>
            <img :src="item.user_avatar" class="head" alt="">
          </template>
        </van-cell>

        <van-cell :title="item.description" />

        <!-- 图片对比区域 -->
        <div class="image-comparison">
          <div class="image-box">
            <img :src="item.before_image" alt="整改前">
            <div class="image-label">整改前</div>
          </div>
          <div class="image-box">
            <img :src="item.after_image" alt="整改后">
            <div class="image-label">整改后</div>
          </div>
        </div>

        <!-- 互动按钮 -->
        <div class="btnline btn-group">
          <a class="btn">
            <van-icon name="share-o" />{{ item.share_count }}
          </a>
          <a class="btn">
            <van-icon name="chat-o" />{{ item.collect_count }}
          </a>
          <a class="btn">
            <van-icon name="good-job-o" />{{ item.like_count }}
          </a>
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<style scoped>
/* 新增样式 */
.image-comparison {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 12px;
}

.image-box {
  flex: 1;
  position: relative;
}

.image-box img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
}

.image-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 原有样式调整 */
.head {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.btnline.btn-group {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.btnline.btn-group .btn {
  flex: 1;
  text-align: center;
  line-height: 40px;
}

.btnline.btn-group .btn i {
  margin-right: 6px;
}
</style>